<template>
  <div class="login-box">
    <heading-title title="Customer Login" />
    <div class="login-container">
			<el-row :gutter="12">
				<el-col :xs="24" :sm="12">
				  <div class="left-box">
        <span>EMAIL</span>
        <div>
          <input v-model="info.username" type="text" />
          <p v-show="emailShow">{{ "This is a required field." }}</p>
        </div>
        <span>PASSWORD</span>
        <div>
          <input v-model="info.password" type="password" />
          <p v-show="passwordShow">{{ "This is a required field." }}</p>
        </div>
        <div class="btn" @click="submit">
          {{ "Sign In" }}
        </div>
        <p @click="$router.push('/forget')" class="forget-text">{{ "Forgot Your Password?" }}</p>
      </div>
				</el-col>
				<el-col :xs="24" :sm="12">
 <div class="right-box">
        <p>{{ createText }}</p>
        <div class="btn" @click="$router.push('/account')">
          {{ "Create an Account" }}
        </div>
        </div>
				</el-col>
			</el-row>
      <!-- <div class="left-box">
        <span>EMAIL</span>
        <div>
          <input v-model="info.username" type="text" />
          <p v-show="emailShow">{{ "This is a required field." }}</p>
        </div>
        <span>PASSWORD</span>
        <div>
          <input v-model="info.password" type="password" />
          <p v-show="passwordShow">{{ "This is a required field." }}</p>
        </div>
        <div class="btn" @click="submit">
          {{ "Sign In" }}
        </div>
        <p @click="$router.push('/forget')" class="forget-text">{{ "Forgot Your Password?" }}</p>
      </div>
      <div class="right-box">
        <p>{{ createText }}</p>
        <div class="btn" @click="$router.push('/account')">
          {{ "Create an Account" }}
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      createText:
        "Creating an account has many benefits: check out faster, keep more than one address, track orders and more.",
      info: {},
      emailShow: false,
      passwordShow: false
    };
  },

  components: {
    HeadingTitle: () => import("_c/HeadingTitle")
  },

  methods: {
    // 登录
    async submit() {
      if (!this.info.username) this.emailShow = true;
      else this.emailShow = false;
      if (!this.info.password) this.passwordShow = true;
      else this.passwordShow = false;

			let _this = this;
			let {data} = await _this.$store.dispatch('user/Login', _this.info);
			if (!data) return _this.$message.error('账号或者密码错误');
			_this.$message.success('登录成功');
			_this.$store.dispatch('user/getInfo').then(res => {
				_this.store.dispatch('user/createCart');
				let price = 0, arry = [];
				for (let i in res) {
					price += res[i].price;
					res[i].id = res[i].item_id;
					arry.push(res[i])
				}
				_this.store.commit("product/SET_PRODUCTLIST", arry);
				_this.store.commit("product/SET_PRICETPTAL", price);
			}).catch(() => {
				_this.$store.dispatch('user/loginOut')
			});
			_this.$router.push('/');
    }
  }
};
</script>
<style lang="scss" scoped>
.login-box {
  .login-container {
    // display: flex;
    max-width: 936px;
    margin: 0 auto;
    justify-content: center;
		div.right-box {
      max-width: 355px;
			padding: 0 10px;
    }
    .left-box {
			@media (min-width: 768px) {	
      	margin-right: 100px;
			}
			max-width: 355px;
			padding: 0 10px;

      span {
        font-size: 12px;
        color: #969696;
        &::after {
          content: "*";
          padding-left: 2px;
          color: #969696;
          font-size: 12px;
          margin: 0 0 0 5px;
        }
      }
      input {
        width: 100%;
        height: 30px;
        border: 0;
        border-bottom: 1px solid #e2e2e2;
        margin-bottom: 10px;
        outline: 0;
        font-size: 14px;
        color: #000;
        padding: 5px 0;
        border-radius: 5px;
        &:focus {
          border-bottom-color: #1a1a1a;
        }
      }
      p {
        font-size: 12px;
        color: #e02b27;
        margin: 0;
      }
      & > div {
        margin-bottom: 29px;
      }
      p.forget-text {
        color: #000;
        text-align: center;
        cursor: pointer;
      }
    }
    .right-box {
      p {
        line-height: 25px;
        font-size: 12px;
        margin-bottom: 20px;
      }
    }

    div.btn {
      width: 100%;
      height: 50px;
      line-height: 50px;
      background: #000;
      border-color: #000;
      color: #fff;
      font-weight: 500;
      text-align: center;
      cursor: pointer;
      margin-bottom: 15px;
    }
  }
}
</style>
